<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <!-- 基本卡片 -->
        <el-card class="box-card mb-20">
          <template #header>
            <div class="card-header">
              <span>基本卡片</span>
            </div>
          </template>
          <div class="basic-card-demo">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in basicCards" :key="index">
                <el-card class="demo-card" shadow="hover">
                  <h3>{{ item.title }}</h3>
                  <div class="card-content">
                    {{ item.content }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 带图片的卡片 -->
        <el-card class="box-card mb-20">
          <template #header>
            <div class="card-header">
              <span>带图片的卡片</span>
            </div>
          </template>
          <div class="image-card-demo">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in imageCards" :key="index">
                <el-card class="demo-card" shadow="hover">
                  <img :src="item.image" class="card-image" />
                  <div class="card-body">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.description }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 卡片操作 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>卡片操作</span>
            </div>
          </template>
          <div class="interactive-card-demo">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in actionCards" :key="index">
                <el-card class="demo-card" shadow="hover">
                  <template #header>
                    <div class="card-header">
                      <span>{{ item.title }}</span>
                      <div class="card-actions">
                        <el-button circle link type="primary" @click="handleEdit(item)">
                          <el-icon><Edit /></el-icon>
                        </el-button>
                        <el-button circle link type="danger" @click="handleDelete(item)">
                          <el-icon><Delete /></el-icon>
                        </el-button>
                      </div>
                    </div>
                  </template>
                  <div class="card-body">
                    <p>{{ item.description }}</p>
                    <div class="action-footer">
                      <el-button type="primary" text @click="handleDetails(item)">查看详情</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'

// 基本卡片数据
const basicCards = ref([
  {
    title: '基础卡片1',
    content: '这是一个基础卡片示例，主要用于展示基本的卡片布局和样式。'
  },
  {
    title: '基础卡片2',
    content: '卡片可以用于包含少量内容的容器，卡片通常是灵活的，可自适应页面布局。'
  },
  {
    title: '基础卡片3',
    content: '鼠标悬停时会有阴影效果，增强与用户的交互体验，适合用于内容分块展示。'
  }
])

// 带图片的卡片数据
const imageCards = ref([
  {
    title: '图片卡片1',
    description: '这是一个带图片的卡片示例，图片位于卡片顶部。',
    image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
  },
  {
    title: '图片卡片2',
    description: '添加图片可以增强卡片的视觉效果，提高信息的吸引力。',
    image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
  },
  {
    title: '图片卡片3',
    description: '图片卡片适合用于产品展示、新闻内容或图文混排的场景。',
    image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
  }
])

// 带操作的卡片数据
const actionCards = ref([
  {
    id: 1,
    title: '可操作卡片1',
    description: '这个卡片包含操作按钮，可以进行编辑、删除等操作。'
  },
  {
    id: 2,
    title: '可操作卡片2',
    description: '卡片中的操作按钮可以根据需要进行自定义，实现不同的功能。'
  },
  {
    id: 3,
    title: '可操作卡片3',
    description: '适合用于需要对内容进行管理的场景，如任务卡片、笔记卡片等。'
  }
])

// 编辑卡片
const handleEdit = (item) => {
  ElMessage({
    message: `编辑卡片：${item.title}`,
    type: 'info'
  })
}

// 删除卡片
const handleDelete = (item) => {
  ElMessageBox.confirm(
    `确定要删除卡片"${item.title}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // 过滤删除操作，实际应用中可能需要调用API
      actionCards.value = actionCards.value.filter(card => card.id !== item.id)
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}

// 查看详情
const handleDetails = (item) => {
  ElMessage({
    message: `查看${item.title}的详情`,
    type: 'success'
  })
}
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-card {
  margin-bottom: 20px;
  height: 100%;
}
.card-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.card-body {
  padding: 10px 0;
}
h3 {
  margin: 0 0 10px 0;
  color: #303133;
}
p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
.action-footer {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.card-actions {
  display: flex;
  gap: 5px;
}
</style> 